import React ,{useState ,useEffect} from 'react';
import style from './CollectioEdit.module.scss'
import {useNavigate} from "react-router-dom";
import {notification} from "antd";
import {getCollectionApi,registerCollectionApi} from '../../http/userApi'


//定义弹窗成功提示的一些内容
type NotificationType = 'success' | 'info' | 'warning' | 'error';
const openNotificationWithIcon = (type: NotificationType,msg) => {
    notification[type]({
        message: msg,
        placement:'top',
        duration: 1,
    });
};
function CollectioEdit(props) {
    const navigate = useNavigate()
    const initState = {
        collectionCorporateName:'',
        accountNumber:'',
        bankAdderss:'',
        depositBank:'',
    }
    const [state , setState] = useState(initState)
    useEffect(()=>{
        getCollectionApi()
            .then(res=>{
                if (res.data.code==200){
                    setState({...res.data.data})
                }
            })
    },[])
    const changeInput =(e)=>{
        setState({
            ...state,[e.target.name]:e.target.value
        })
    }
    //点击返回
    const backHandler =()=>{
        navigate(-1)
    }
    //点击提交
    const submitHandler =()=>{

        if(state.collectionCorporateName==''){
            return openNotificationWithIcon('info','银行开户公司名不能为空')
        }
        if(state.accountNumber==''){
            return openNotificationWithIcon('info','银行开户账号不能为空')
        }
        if(state.depositBank==''){
            return openNotificationWithIcon('info','开户银行所在不能为空')
        }
        if(state.depositBank==''){
            return openNotificationWithIcon('info','开户银行不能为空')
        }
        registerCollectionApi(state.collectionCorporateName)
            .then(res=>{
                if (res.data.code==200){
                    navigate(-1)
                    return openNotificationWithIcon('success','登录账号修改成功')

                }else{
                    return openNotificationWithIcon('info','原邮箱验证码错误，请重新输入')
                }
            })


    }

    return (
        <div>
            <div className={style.back} onClick={backHandler}>返回</div>
            <div className={style.header}>修改收款信息</div>
            <div className={style.item}>
                <div>银行开户公司名</div>
                <input type="text" value={state.collectionCorporateName} name="collectionCorporateName" onChange={(e)=>changeInput(e)}></input>

            </div>

            <div className={style.item}>
                <div>银行开户账号</div>
                <input type="text"value={state.accountNumber} name="accountNumber" onChange={(e)=>changeInput(e)}></input>

            </div>
            <div className={style.item}>
                <div>开户银行所在地</div>
                <input type="text" value={state.bankAdderss} name="bankAdderss" onChange={(e)=>changeInput(e)}></input>
            </div>
            <div className={style.item}>
                <div>开户银行</div>
                <input type="text" value={state.depositBank} name="depositBank" onChange={(e)=>changeInput(e)}></input>
            </div>
            <div className={style.item}>
                <div></div>
                <div className={style.submit} onClick={submitHandler}>提交</div>
            </div>


        </div>
    );
}

export default CollectioEdit;